<template>
  <div class="chart">
    <!-- 条件渲染 -->
    <el-button-group>
      <el-button type="primary" size="small" @click="tomap">现有确诊</el-button>
      <el-button type="primary" size="small">累计确诊</el-button>
    </el-button-group>
    <!-- 地图 -->
    <div id="map"></div>
    <!-- 上海地图 -->
    <div id="map_shanghai"></div>
    <!-- 广东地图 -->
    <div id="map_guangdong"></div>
  </div>
</template>
<script>
// vue模块化，表示对外暴露当前对象
export default {
  // 1. 数据
  data() {
    return {};
  },
  // 2. 方法

  methods: {
    loadChinaMap(){
      let data = [
        { name: "北京", value: 0 },
        { name: "天津", value: 13 },
        { name: "河北", value: 13 },
        { name: "山西", value: 2 },
        { name: "内蒙古", value: 2 },
        { name: "辽宁", value: 2 },
        { name: "吉林", value: 0 },
        { name: "黑龙江", value: 0 },
        { name: "上海", value: 59 },
        { name: "江苏", value: 6 },
        { name: "浙江", value: 9 },
        { name: "安徽", value: 0 },
        { name: "福建", value: 13 },
        { name: "江西", value: 0 },
        { name: "山东", value: 15 },
        { name: "河南", value: 0 },
        { name: "湖北", value: 0 },
        { name: "湖南", value: 0 },
        { name: "广东", value: 13 },
        { name: "广西", value: 0 },
        { name: "海南", value: 0 },
        { name: "重庆", value: 0 },
        { name: "四川", value: 24 },
        { name: "贵州", value: 0 },
        { name: "云南", value: 6 },
        { name: "西藏", value: 0 },
        { name: "陕西", value: 2 },
        { name: "甘肃", value: 0 },
        { name: "青海", value: 0 },
        { name: "宁夏", value: 0 },
        { name: "新疆", value: 22 },
        { name: "台湾", value: 19 },
        { name: "香港", value: 352 },
        { name: "澳门", value: 0 },
        { name: "南海诸岛", value: 0 },
        { name: "南海诸岛", value: 0 },
      ];

      var mapdata = Highcharts.maps["cn/china"];
      var chart = Highcharts.mapChart("map", {
          title:{
          text:"中国现有确诊"
        },
        colorAxis: {
          min: 0,
          max: 20,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [
          {
            mapData: mapdata,
            data,
            joinBy: "name",
            dataLabels:{
              enabled:true,
              color:"#fff",
              style:{"fontSize":"10px","fontWeight":"thin"},
              format:`{point.name}`
            }
          },
        ],
      });
    },
    loadShanghaiMap(){
      // 1. 获取地图数据
      let mapdata = Highcharts.maps['cn/shanghai'];
      // 2. 渲染地图
      let map = Highcharts.mapChart('map_shanghai', {
        title:{
          text:"上海累计确诊"
        },
        colorAxis: {
          min: 0,
          max: 30,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [{
          mapData: mapdata,
          data:[
            {"name":"黄浦区","value":6},
            {"name":"徐汇区","value":18},
            {"name":"长宁区","value":13},
            {"name":"静安区","value":16},
            {"name":"普陀区","value":11},
            {"name":"虹口区","value":7},
            {"name":"杨浦区","value":9},
            {"name":"闵行区","value":19},
            {"name":"宝山区","value":22},
            {"name":"嘉定区","value":9},
            {"name":"浦东新区","value":61},
            {"name":"金山区","value":4},
            {"name":"松江区","value":14},
            {"name":"青浦区","value":6},
            {"name":"奉贤区","value":9},
            {"name":"崇明区","value":4},
            ],
          joinBy:"name",
          dataLabels:{
            enabled:true,
            color:"#fff",
            style:{"fontSize":"10px","fontWeight":"thin"},
            format:`{point.name}`
          }
        }]
      });
    },
        loadguangdongMap(){
      // 1. 获取地图数据
      let mapdata = Highcharts.maps['cn/guangdong'];
      // 2. 渲染地图
      let map = Highcharts.mapChart('map_guangdong', {
        title:{
          text:"广东累计确诊"
        },
        colorAxis: {
          min: 0,
          max: 100,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [{
          mapData: mapdata,
          data:[
            {"name":"广州","value":85},
            {"name":"韶关","value":55},
            {"name":"深圳","value":4},
            {"name":"珠海","value":42},
            {"name":"汕头","value":59},
            {"name":"佛山","value":17},
            {"name":"江门","value":70},
            {"name":"湛江","value":58},
            {"name":"茂名","value":13},
            {"name":"肇庆","value":54},
            {"name":"惠州","value":89},
            {"name":"梅州","value":60},
            {"name":"汕尾","value":58},
            {"name":"河源","value":81},
            {"name":"阳江","value":25},
            {"name":"清远","value":47},
            {"name":"东莞","value":83},
            {"name":"中山","value":36},
            {"name":"东沙群岛","value":56},
            {"name":"潮州","value":72},
            {"name":"揭阳","value":43},
            {"name":"云浮","value":52},
            ],
          joinBy:"name",
          dataLabels:{
            enabled:true,
            color:"#fff",
            style:{"fontSize":"10px","fontWeight":"thin"},
            format:`{point.name}`
          }
        }]
      });
    }
  },
  // 3. 生命周期
  // vue实例创建完毕
  created() {
    // 加载数据，并且将数据更新到data中的变量中
  },
  // 数据绑定之后 vue实例-> 虚拟dom -> 数据绑定 -> 渲染地图
  mounted() {
    // 1. 加载中国地图
    this.loadChinaMap();
    // 2. 加载上海地图
    this.loadShanghaiMap();
    // 3. 加载广东地图
    this.loadguangdongMap();
  },
};
</script>

<style scoped>
#map,
#map_shanghai {
  height: 600px;
}，
#map_guangdong {
  height: 600px;
}
</style>